<template>
	<view class="page-center">
		<view class="">
			<u-navbar back-icon-name="arrow-left" title-size="36" back-text="" :back-icon-size="50" title="动态详情"
				:title-bold="true">
				<view class="navbar-right" slot="right" @click="showProp = true">
					<i class="cuIcon-moreandroid mr30"></i>
				</view>
			</u-navbar>
		</view>


		<view class="center-box">

			<view class="dynameic-header">
				<view class="flex justify-between align-center">
					<view class="flex align-center">
						<image :src="userDeatil.headImg" class="w90 h90 r45" mode=""></image>
						<view class="ml29">
							<view class="mb20">
								<text class="f30">{{userDeatil.nickName}}</text>
								<i class="ml25 cuIcon-male f20" v-if="userDeatil.sex == 1"
									style="color: #40C6A8; font-weight: 700;"></i>
								<i class="ml25 cuIcon-female f20" v-else style="color: #FF2B8A; font-weight: 700;"></i>
								<text class="f22" style="color:#666666 ;">{{userDeatil.age}}</text>
							</view>
							<view class="f24" style="color: #666666;">
								<!-- {{userDeatil.addDate}} -->
								<text class="mr35"> {{$u.timeFrom(time, false)}} </text>
								<text>星榜：{{userDeatil.starNum}}</text>
							</view>

						</view>
					</view>
					<view class="bgc-text1">
						<text v-if="userDeatil.isFollow == 0" @click="followUser(0,userDeatil.uid)">关注</text>
						<text v-if="userDeatil.isFollow == 1" @click="followUser(2,userDeatil.uid)">已关注</text>
					</view>
				</view>
				<view class="mt20 mb30 f28">
					<text>{{userDeatil.dynamic}}</text>
				</view>

				<view class="flex fl flex-wrap image-flex ww100">
					<image v-for="(item, index) in userDeatil.apiUserDynamicImgList" :key="index" class="w217 h217 r10"
						:src="item.img" mode=""></image>
				</view>
				<view class="f22">
					<text style="color: #40C6A8;" v-for="(item, index) in userDeatil.apiUserDynamicTopics"
						:key="index">#{{item.topic}}</text>

					<view class="f22 flex justify-between mt18 mb53" style="color: #666666;">
						<view class="">
							<i class="cuIcon-location"></i>
							<text class="ml17">{{userDeatil.address}}</text>
						</view>

						<view class="">
							<i class="cuIcon-like" v-if="userDeatil.isLove == 0" @click="addGoods"></i>
							<i style="color:#FF2B8A;" class="cuIcon-likefill" v-else  @click="addGoods"></i>
							<text class="mr21 ml8">{{userDeatil.loveNum}}</text>
							<i class="cuIcon-message"></i>
							<text class="mr21 ml8">{{userDeatil.commentNum}}</text>
							<i class="cuIcon-favor" v-if="userDeatil.isCollect == 0" @click="dyn"></i>
							<i class="cuIcon-favor" style="color:#FF2B8A;" v-else @click="dyn"></i>
							<text class="ml8">{{userDeatil.collectNum}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="h80 lh80 pl29 comment-list">
			评论 {{count}}
		</view>
		<z-paging ref='paging' v-model='userDynCommentPageList' @query='queryList' :default-page-size='10'
			:use-page-scroll="true" loading-more-no-more-text='我也是有底线的！' :show-refresher-update-time='true'
			:refresher-update-time-key='initMun'>
			<!-- <custom-refresher slot="refresher" slot-scope="{ refresherStatus }" :status="refresherStatus">
			</custom-refresher> -->
			<view>
				<view class="review-botm">
					<view class="flex  ww100 h181 mb28" v-for="(item, index) in userDynCommentPageList" :key="index">
						<image :src="item.headImg" class="w90 h90 r45 mr30" mode=""></image>
						<view class="flex ww84 justify-between u-border-bottom">
							<view class="">
								<view class="">
									<text>{{item.nickName}}</text>
								</view>
								<view class="mt15" style="color: #999999;">
									<!-- 小时前 -->
									<text>{{item.addDate}}</text>
								</view>
								<view class="mt15">
									<text>{{item.comment}}</text>
								</view>
							</view>
							<view class="" @click="commentAdd(item.id)">
								<!-- <i class="cuIcon-likefill"></i> -->
								<i class="cuIcon-like mr8" v-if="item.loveNums == 0"></i>
								<i class="cuIcon-like mr8" style="color: #FF2B8A;" v-else></i>
								<text class="fs20">{{item.loveNums}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<view class="h200">
		</view>

		<view class="flex-input flex justify-between align-center">
			<view class="input-box">
				<input type="text" v-model="val" placeholder="请输入评论" />
			</view>

			<button type="default" class="cu-btn f36" :class="btn  == 1 ? 'btn-bgc' : ''" @click="addSend">发送</button>
		</view>


		<u-popup v-model="showProp" height="300" border-radius="30" mode="bottom">
			<view class="w100 hh100 pt99 pl66 flex">
				<view class="text-center w80" @click="l.to('/pages/home/private')">
					<view class="bgc-text mb25">
						<image src="../../static/img/siliao.png" class="w50 h50" mode=""></image>
					</view>
					<text class="">
						私聊
					</text>
				</view>
				<view class="ml70">
					<view class="bgc-text mb25">
						<image src="../../static/img/jub.png" class="w50 h50" mode=""></image>
					</view>
					<text class="">
						举报
					</text>
				</view>
			</view>
		</u-popup>


		<u-popup v-model="alterProp" height="900" mode="bottom">
			<view class="alter-box">
				<view class="ww100 h160 bgc-tra">
				</view>
				<view class="hh82" style="background-color: #FFFFFF; border-radius: 20rpx 20rpx 0 0;">

					<view class="flex justify-between align-center pl60 pr53">
						<view class=" flex align-center">
							<image src="../../static/img/icon.png" class="w140 h140 bgc-top" mode=""></image>
							<view class="ml38 f34">
								<text>星星余额：10</text>
							</view>
						</view>
						<view class="" @click="alterProp = false">
							<i class="cuIcon-close f40"></i>
						</view>
					</view>
					<!-- <block v-for="(item, index) in fromlist" :key="index" >
						<view class="flex align-center justify-around fl mt64 flex-wrap padd-auto" style="background-color: #FFFFFF;"
							>
							<view class="w180 h180 text-center" :class="border == index ? 'bor' : ''" @click="roadAdd(index)">
								<image src="@/static/img/icon-one.png" class="w100 h100" mode=""></image>
								<view>
									<text style="color: #C88722;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</block> -->

					<view class="flex f30 pt50 pr55 pl55 mb60 align-center justify-between">
						<view class=" w280 h80 lh80 r40 text-center" style="background: linear-gradient(270deg, #F3C876, #C88722);
							color: #FFFFFF;" @click="toUp">
							充值
						</view>
						<view class=" w280 h80 lh80 r40 text-center"
							style="background: linear-gradient(270deg, #F3C876, #C88722);color: #FFFFFF;" @click="toUp">
							<!-- balanceAdd = true -->
							立即赠送
						</view>
					</view>
				</view>

			</view>
		</u-popup>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initMun: '1',
				showProp: false,
				dynId: '',
				btn: 0,
				userDeatil: {},
				time: '',
				current: 1,
				val: '',
				count: '',
				alterProp: false,
				userDynCommentPageList: [],
			};
		},
		onShow() {},
		onLoad(e) {
			this.dynId = e.dynId
			this.getUserListInfo()
			this.queryList(1, 10)
		},
		onReachBottom() {
			console.log('111==>', 111);
		},
		methods: {
			async addGoods() {
				const res = await this.$u.post(`api/user/dyn/userDynLove`,{
					dynId: this.dynId,
					id: uni.getStorageSync('userInfo').id
				})
				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.getUserListInfo()
				}
			},
			
			async dyn() {
				const res = await this.$u.post('api/user/dyn/userDynCollect',{
					dynId: this.dynId,
					id: uni.getStorageSync('userInfo').id
				})
				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.getUserListInfo()
				}
			},
			
			async queryList(pageNo, pageSize) {
				let obj = {
					page: pageNo,
					page_size: pageSize,
				};
				const res = await this.$u.get(`api/user/dyn/userDynCommentPage/${this.dynId}/${pageNo}/${pageSize}`);
				this.count = res.data.count
				if (res.data.list == []) return;
				this.$refs.paging.complete(res.data.list);
			},


			async addSend() {
				this.btn = 1
				const res = await this.$u.post('api/user/dyn/dynComment', {
					comment: this.val,
					dynId: this.dynId,
					id: uni.getStorageSync('userInfo').id
				})
				this.btn = 0
				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.val = ''
					
					this.queryList(1, 10)
				}
			},

			async getUserListInfo() {
				const res = await this.$u.get(`api/user/dyn/userDynDetail/${this.dynId}`)
				this.userDeatil = res.data
				let d = new Date(this.userDeatil.addDate)
				this.time = d.getTime(d) // 方法1
			},
			
			async followUser(index, id) {
				const res = await this.$u.post('api/follow/userFollow', {
					followType: index,
					followUid: id,
				})
				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.getUserListInfo()
				}
			},
			
			async commentAdd(id) {
				const res = await this.$u.post('api/user/dyn/comment/userDynLove',{
					commentId: id,
				})
				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.queryList(1, 10)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-center {

		.center-box {
			padding: 30rpx 30rpx 0;

			.dynameic-header {

				.bgc-text1 {
					border-radius: 10rpx;
					padding: 14rpx 38rpx;
					color: #666666;
					font-size: 24rpx;
					background-color: #F0F0F0;
				}

				.image-flex {
					margin-bottom: 25rpx;

					image {
						width: 217rpx;
						height: 217rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					image:nth-child(3n + 0) {
						margin-right: 0;
					}
				}
			}
		}

		.comment-list {
			color: #666666;
			font-size: 24rpx;
			background: #F7F5F7;
		}

		.review-botm {
			padding: 30rpx;
		}

		.flex-input {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 109rpx;
			background: #FFFFFF;
			padding: 30rpx;
			z-index: 999;
			box-shadow: 0px -1px 0px 0px #F0F0F0;

			.input-box {
				width: 80%;
				height: 70rpx;
				border-radius: 35rpx;
				background-color: #F5F5F5;

				input {
					width: 100%;
					height: 100%;
					padding-left: 40rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
				}
			}

			button {
				border-radius: 35rpx;
				color: #FFFFFF;
			}

			.btn-bgc {
				background-color: #000000;
				font-size: 36rpx;
				font-family: PingFang SC;
			}
		}

		.bgc-text {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			background-color: #F7F7F7;


			image {
				margin: auto;
			}
		}
	}
</style>
